<template>
  <div id="app">
    <div class="header">
			<span class="back" @click="goback" v-show="flag">
					返回
			</span>
        <span class="title">
          黑马程序员Vue项目
        </span>
    </div>
     <router-view></router-view>
     <nav class="mui-bar mui-bar-tab">
		<router-link  class="mui-tab-item mui-active " to="/">
			<span class="mui-icon mui-icon-home active"></span>
			<span class="mui-tab-label active">首页</span>
		</router-link>
		<a class="mui-tab-item" >
			<span class="mui-icon mui-icon-bars"></span>
			<span class="mui-tab-label">分类</span>
		</a>
		<router-link to = "/Buycar" class="mui-tab-item" >
			<span class="mui-icon mui-icon-extra mui-icon-extra-cart">
				<span class="mui-badge">{{$store.getters.addcount}}</span>
			</span>
			<span class="mui-tab-label">购物车</span> 
		</router-link>
		<a class="mui-tab-item">
			<span class="mui-icon mui-icon-person"></span>
			<span class="mui-tab-label">会员中心</span>
		</a>
	</nav>
    

  </div>

  
</template>

<script>
export default {
	name: 'App',
	data(){
		return{
			flag:false
		}
	},
	created(){
		this.tabnav()
	},
	methods:{
		goback(){
				this.$router.go(-1)
		},
		tabnav(){
			this.mui('body').on('tap','a',function(){document.location.href=this.href;});
		}
	},
	// watch:{
	// 	"$route.path":function(newVal){
	// 		if(newVal === "/"){
	// 			// console.log(1)
	// 			this.flag = true;
	// 		}else{
	// 			this.flag = false;
	// 		}
	// 	}
	// }
}
</script>

<style>
.back{
	position: absolute;
	top: 0rem;
	left: .1rem;
	/* margin-left: .1rem; */
}

.header{
	position: relative;
	/* padding:0 .4rem 0 .1rem; */
  text-align: center;
  color: #fff;
  height: .8rem;
  line-height: .8rem;
  background-color: #00afc7;;
}
.header span{
  color: #fff;
}

</style>
